<template>
  <div id="app-container">
    <!--表头工具栏-->
    <div class="handle-box">
      <div style="margin-bottom: 15px">
        <el-button icon="el-icon-back" type="primary" @click="backpage()">{{
          $t("tool.historyGo")
        }}</el-button>
        <el-button icon="el-icon-plus" @click="addData">{{
          $t("operating.add")
        }}</el-button>
        <!--<span>物料类型：</span>-->
        <!--<el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select" style="width:210px;">-->
        <!--<el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>-->
        <!--</el-input>-->
        <!--<div class="buttonRt">-->
        <!--<el-button icon="el-icon-plus" @click="addData">添加</el-button>-->
        <!--</div>-->
      </div>
      <div class="clear"></div>
    </div>

    <!--表格-->
    <el-table
      class="datalist"
      :data="tableData"
      :height="tableHeight"
      ref="multipleTable"
    >
      <!--&lt;!&ndash;多选框&ndash;&gt;-->
      <!--<el-table-column type="selection" width="50" align="center"></el-table-column>-->
      <!--物料类型名称-->
      <el-table-column
        prop="name"
        :label="$t('tool.toolName')"
        min-width="200"
      ></el-table-column>
      <!--颜色-->
      <el-table-column :label="$t('tool.typeColor')" min-width="100">
        <template slot-scope="scope">
          <!--<el-color-picker v-model="scope.row.color"></el-color-picker>-->
          <span
            class="typeColor"
            :style="{ background: scope.row.color }"
          ></span>
        </template>
      </el-table-column>
      <!--图标-->
      <el-table-column :label="$t('tool.icon')" min-width="150">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <!--物料类型说明-->
      <el-table-column
        prop="note"
        :label="$t('tool.note')"
        min-width="150"
      ></el-table-column>
      <!--备注-->
      <el-table-column
        prop="remark"
        :label="$t('tool.remark')"
        min-width="150"
      ></el-table-column>
      <!--操作-->
      <el-table-column :label="$t('operating.operating')" min-width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            >{{ $t("operating.handle") }}</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >{{ $t("operating.delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>

    <!--编辑弹出框-->
    <el-dialog
      :title="titleMap[dialogStatus]"
      :close-on-click-modal="false"
      :visible.sync="editVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!--车辆类型名称-->
        <el-form-item
          :label="$t('tool.toolName')"
          prop="name"
          :rules="filter_rules({ required: '请输入工种名称' })"
        >
          <el-input v-model="form.name" style="max-width: 215px"></el-input>
        </el-form-item>
        <!--颜色-->
        <el-form-item :label="$t('tool.typeColor')">
          <el-color-picker v-model="color"></el-color-picker>
        </el-form-item>
        <!--图标-->
        <el-form-item :label="$t('tool.icon')">
          <el-select
            v-model="form.icon"
            filterable
            :placeholder="$t('operating.pleaseChosen')"
            style="max-width: 215px"
          >
            <el-option
              v-for="item in toolTypeList"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left"
                ><i style="font-size: 14px" :class="item.value">{{
                  item.label
                }}</i></span
              >
            </el-option>
          </el-select>
        </el-form-item>
        <!--车辆类型说明-->
        <el-form-item :label="$t('tool.note')">
          <el-input v-model="form.note" style="max-width: 215px"></el-input>
        </el-form-item>
        <!--工种说明-->
        <el-form-item :label="$t('tool.remark')">
          <el-input v-model="form.remark" style="max-width: 215px"></el-input>
        </el-form-item>
      </el-form>
      <!--操作-->
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            editVisible = false;
            editEnable = true;
          "
          >{{ $t("operating.cancel") }}</el-button
        >
        <el-button @click="saveEdit('form')" type="primary">{{
          $t("operating.determine")
        }}</el-button>
      </span>
    </el-dialog>
  
  </div>
</template>

<script>
import Cookie from "js-cookie";
import {
  resourceTypeList,
  resourceTypeSaveEdit,
  resourceTypeDelete,
} from "@/api/cy.js";
export default {
  data() {
    return {
      /*********************表格相关*********************/
      editVisible: false, //编辑框是否可见
      delVisible: false, //删除框是否可见
      editEnable: true, //点击的编辑or添加
      tableData: [],
      searchVal: "",
      form: {},
      idx: "",
      //表单验证规则
      rules: {},
      tableHeight: window.innerHeight - 240,

      currentPage: 1, //当前所在页
      total: 0, //总页数
      pageSize: "10", //

      color: null,
      toolTypeList: [
        { value: "al-icon-carhuowu", label: this.$t("tool.cargo") },
      ],
      //新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
      titleMap: {
        addEquipment: this.$t("operating.add"),
        editEquipment: this.$t("operating.handle"),
      },
      //新增和编辑弹框标题
      dialogStatus: "",
    };
  },
  //  已经完成模板渲染或者el对应的html渲染后
  mounted() {
    this.getData();
  },
  methods: {
    backpage() {
      this.$emit("changeTag", false);
    },
    //  获取表格要使用的json数据
    getData() {
      let param = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        param: {
          type: "material",
        },
      };
      resourceTypeList(param).then((res) => {
        this.total = res.data.totalSize;
        this.tableData = res.data.content;
      });
    },

    //返回物料管理
    historyGo() {
      this.$router.push("/ToolManage");
    },
    //分页导航
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    //添加
    addData() {
      this.form = {};
      this.idx = "";
      this.color = null;
      this.editVisible = true;
      this.dialogStatus = "addEquipment";
    },
    //编辑
    handleEdit(index, row) {
      this.form = {
        name: row.name,
        icon: row.icon,
        note: row.note,
        remark: row.remark,
      };
      this.color = row.color;
      this.idx = row.idx;
      this.editVisible = true;
      this.editEnable = false;
      this.dialogStatus = "editEquipment";
    },
    //确定修改
    saveEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editEnable) {
            let param = {
              name: this.form.name,
              color: this.color,
              icon: this.form.icon,
              note: this.form.note,
              remark: this.form.remark,
              type: "material",
            };
            resourceTypeSaveEdit(param).then((result) => {
              let RES = result.data;
              if (RES) {
                this.editVisible = false;
                this.getData();
              }
            });
          } else {
            let param = {
              idx: this.idx,
              name: this.form.name,
              color: this.color,
              icon: this.form.icon,
              note: this.form.note,
              remark: this.form.remark,
              type: "material",
            };
            resourceTypeSaveEdit(param).then((result) => {
              let RES = result.data;
              if (RES) {
                this.editVisible = false;
                this.getData();
              }
            });
          }
        }
      });
    },
    //删除
    handleDelete(index, row) {
      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = [{ idx: row.idx}];
          return resourceTypeDelete(param);
        })
        .then(() => {
          this.msgSuccess("删除成功");
         this.getData();
        });
    },


  },
};
</script>
<style scoped>
#body {
  width: 100%;
  height: 100%;
}
.handle-box {
  min-width: 1125px;
}

.handle-box * {
  float: left;
}
.handle-box span {
  line-height: 28px;
}
span {
  margin-left: 10px;
  font-size: 13px;
}
span {
  margin-left: 10px;
  font-size: 13px;
}
.datalist {
  width: 100%;
  min-width: 1150px;
}
.buttonRt {
  float: right;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.typeColor {
  display: inline-block;
  width: 20px;
  height: 20px;
}
</style>


